<template>
    <div>
        <div class="add-record">
            <Input
                    id="domain-record"
                    v-model="domainValue"
                    placeholder="域名记录"
                    style="width: 160px"
                    @mouseenter.native="showRecordTip"
                    @mouseleave.native="hideRecordTip"
            />
            <Select
                    class="add-type"
                    v-model="model1"
                    placeholder="记录类型"
                    style="width:90px"
                    @mouseenter.native="showTypeTip"
                    @mouseleave.native="hideTypeTip"
            >
                <Option v-for="item in recordList"
                        :value="item.value"
                        :key="item.value"
                >
                    {{ item.label }}
                </Option>
            </Select>
            <Tooltip content="用于智能解析" placement="top-start">
                <Select
                        v-model="areaModel"
                        style="width:70px"
                >
                    <Option v-for="item in areasList"
                            :value="item.value"
                            :key="item.value"
                    >
                        {{ item.label }}
                    </Option>
                </Select>
            </Tooltip>
            <Input v-model="recordValue"
                   placeholder="记录值"
                   style="width: 200px"
                   @mouseenter.native="showValueTip"
                   @mouseleave.native="hideValueTip"
            />
            <Input v-model="mxValue"
                   placeholder=""
                   style="width: 50px"
                   disabled
            />
            <Input v-model="ttlValue"
                   placeholder="600"
                   style="width: 80px"
            />
            <Button type="primary">保存</Button>
            <Button @click="handleCancel">取消</Button>
        </div>
        <div class="point" v-if="showRecord">
            <h4>提示您： 要解析www.shenshuo.me,请填写www</h4>
            <div class="content">
                <h6>主机记录就是域名前缀，常见用法有：</h6>
                <p>
                    <span class="title-wrap">
                        <span>www</span>
                        <span>:</span>
                    </span>
                    解析后的域名为www.qq.cn
                </p>
                <p>
                    <span class="title-wrap">
                        <span>@</span>
                        <span>:</span>
                    </span>
                    直接解析主域名qq.com.cn
                </p>
                <p>
                    <span class="title-wrap">
                        <span>*</span>
                        <span>:</span>
                    </span>
                    泛解析，匹配其他所有域名*.qq.com.cn
                </p>
            </div>
        </div>
        <div class="point" v-if="showType">
            <h4>提示您： 要指向空间商提供的 IP 地址，选择「类型 A」，要指向一个域名，选择「类型 CNAME」</h4>
            <div class="content">
                <p>
                    <span class="title-wrap">
                        <span>A记录</span>
                        <span>:</span>
                    </span>
                    地址记录，用来指定域名的IPv4地址（如：8.8.8.8），如果需要将域名指向一个IP地址，就需要添加A记录。
                </p>
                <p>
                    <span class="title-wrap">
                        <span>CNAME</span>
                        <span>:</span>
                    </span>
                    如果需要将域名指向另一个域名，再由另一个域名提供ip地址，就需要添加CNAME记录。
                </p>
                <p>
                    <span class="title-wrap">
                        <span>TXT</span>
                        <span>:</span>
                    </span>
                    在这里可以填写任何东西，长度限制255。绝大多数的TXT记录是用来做SPF记录（反垃圾邮件）。
                </p>
                <p>
                    <span class="title-wrap">
                        <span>NS</span>
                        <span>:</span>
                    </span>
                    域名服务器记录，如果需要把子域名交给其他DNS服务商解析，就需要添加NS记录。
                </p>
                <p>
                    <span class="title-wrap">
                        <span>AAAA</span>
                        <span>:</span>
                    </span>
                    用来指定主机名（或域名）对应的IPv6地址（例如：ff06:0:0:0:0:0:0:c3）记录。
                </p>
                <p>
                    <span class="title-wrap">
                        <span>MX</span>
                        <span>:</span>
                    </span>
                    如果需要设置邮箱，让邮箱能收到邮件，就需要添加MX记录。
                </p>
            </div>
        </div>
        <div class="point" v-if="showValue">
            <h4>提示您： 要指向空间商提供的 IP 地址，选择「类型 A」，要指向一个域名，选择「类型 CNAME」</h4>
            <div class="content">
                <h6>各类型的记录值一般是这样的：</h6>
                <p>A记录：填写您服务器 IP，如果您不知道，请咨询您的空间商</p>
                <p>CNAME记录：填写空间商给您提供的域名，例如：shenshuo.me</p>
                <p>MX记录：填写您邮件服务器的IP地址或企业邮局给您提供的域名，如果您不知道，请咨询您的邮件服务提供商</p>
                <p>TXT记录：一般用于 163、 Google、QQ等企业邮箱的反垃圾邮件设置</p>
                <p>AAAA：不常用。解析到 IPv6 的地址。</p>
                <p>NS记录：NS向下授权，填写dns域名，例如：f1g1ns1.dnspod.net</p>
            </div>
        </div>
    </div>

</template>
<script>
    import { Input, Select, Option, Button, Tooltip } from 'view-design'

    export default {
        components: {
            Input,
            Select,
            Option,
            Button,
            Tooltip
        },
        data () {
            return {
                domainValue: '',
                recordValue: '',
                mxValue: '',
                ttlValue: '600',
                showRecord: false,
                showType: false,
                showValue: false,
                recordList: [
                    {
                        value: 'NS',
                        label: 'NS'
                    },
                    {
                        value: 'A',
                        label: 'A'
                    },
                    {
                        value: 'CNAME',
                        label: 'CNAME'
                    }
                ],
                areasList: [
                    {
                        value: '默认',
                        label: '默认'
                    },
                    {
                        value: '内网',
                        label: '内网'
                    },
                    {
                        value: '电信',
                        label: '电信'
                    }
                ],
                areaModel: '默认',
                model1: ''
            }
        },
        methods: {
            showRecordTip () {
                this.showRecord = true
            },
            hideRecordTip () {
                this.showRecord = false
            },
            showTypeTip () {
                this.showType = true
            },
            hideTypeTip () {
                this.showType = false
            },
            showValueTip () {
                this.showValue = true
            },
            hideValueTip () {
                this.showValue = false
            },
            handleCancel () {
                this.$emit('hide')
            }
        }
    }
</script>


<style scoped>
    .add-record div{
        margin-right: 10px;
    }
    .point {
        width: 90%;
        margin-top: 20px;
        padding-left: 55px;
        padding-top: 10px;
        padding-bottom: 10px;
        border: 1px solid rgb(172,220,254);
        background: rgb(240,250,255);
    }
    .point .content {
        margin-top: 10px;
    }
    .point .content .title-wrap {
        display: inline-flex;
        width: 60px;
        justify-content: space-between;
    }
    .point .content .title-wrap span:first-child {
        color: #5cadff;
    }
    .point p {
        font-size: 12px;
    }
    .point span {

    }
</style>